<template>
    <div class="pkg-new-select">
        <div class="pkg-select-box">
            <div class="item white-bg default-box-shadow" @click.stop="toSpecDetail(item.index)" v-for="(item, index) in list" :key="index">
                <div class="cover-box">
                    <img class="cover" :src="item.cover" mode="aspectFill" />
                    <div class="discount-label white-color tiny-text">
                        {{(item.discount / 10) + '折优惠'}}
                    </div>
                </div>
                <div class="info-box">
                    <div class="top">
                        <div class="pkg-new-select__title normal-text hidden-text-v3">{{item.value}}</div>
                        <div class="pkg-new-select__outer-checkbox">
                            <div class="holder small-text white-color text-center">{{item.is_default ? '当前套餐默认产品' : ''}}</div>
                        </div>
                    </div>
                    <div class="bottom" @click.stop>
                        <div class="clearfix">
                            <div class="fl price small-text color-red">
                                <span>¥</span>
                                <span class="normal-text">{{item.price}}/件</span>
                            </div>
                            <div class="fr right">
                                <Stepper :value="item.number" :val-index="index" @change="onNumberChange" :can-change="canOptionDel" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    api,
} from '@/lib/api';
import Stepper from '@/features/pkg/stepper.vue';
import store from '@/store';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { ROUTE_NAME } from '@/lib/constant';
import { TRUE } from '@/lib/utils';
import Fuse from 'fuse.js';

let fuse = new Fuse<Pkg.SpecValue & { index: number }>([], {
    keys: [ 'value' ],
});

@Component({
    name: 'PackageSelect',
    components: {
        Stepper,
    },
})
export default class PackageSelect extends Vue {
    @Prop({ type: String }) public keyword?: string;
    @Prop({ type: Number, required: true }) public id: any;
    @Prop({ type: Number, required: true }) public specIndex: any;

    public get selectedGoodsSpecMap() {
        return store.state.pkg.selectedGoodsSpecMap;
    }
    public get selectedGoodsSpec() {
        return this.id && this.selectedGoodsSpecMap[this.id] ? this.selectedGoodsSpecMap[this.id] : [];
    }
    public get value() {
        return this.selectedGoodsSpec[this.specIndex];
    }
    public get mustSelectOne() {
        return this.value.some((item: any) => item.is_default);
    }
    public get canOptionDel() {
        return this.value.reduce((prev: any, next: any) => {
            return {
                number: prev.number + next.number,
            };
        }, {
            number: 0,
        }).number > 1 || !this.mustSelectOne;
    }
    public get list() {
        if (!this.keyword || !this.keyword.trim()) {
            return this.value.map((item, index) => {
                return {
                    ...item,
                    index,
                };
            });
        }
        // @ts-ignore
        fuse.options.minMatchCharLength = this.keyword.length;
        return fuse.search('=' + this.keyword).map((item) => item.item);
    }

    public onNumberChange(option: any) {
        console.log('onNumberChange', option,this.specIndex);
        const type = option.type;
        const valIndex = option.index;
        const number = option.number;
        store.commit('pkg/setSelectedGoodsSpecItemNumber', {
            id: this.id,
            specIndex: this.specIndex,
            valIndex,
            number: type === 'del' ? number - 1 : number + 1,
        });
    }
    public toSpecDetail(index: any) {
        // console.log('123122312:::',this.id,this.specIndex,index)
        // api.navigateTo({
        //     url: '/pages/spec_detail/main',
        //     query: {
        //         pkg_id: this.id,
        //         spec_index: this.specIndex,
        //         val_index: index,
        //     },
        // });
        api.push({
            name: ROUTE_NAME.MALL_SPEC_DETAIL,
            query: {
                pkgId: this.id,
                specIndex: this.specIndex,
                valIndex: index,
            },
        });
    }

    public created() {
        this.value.forEach((item, index) => {
            fuse.add({
                ...item,
                index,
            });
        });
    }
    public beforeDestroy() {
        fuse.remove(TRUE);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.pkg-new-select {
    .pkg-select-box {
        white-space: nowrap;
        overflow-x: scroll;
        .item {
            display: flex;
            padding: 16px 12px;
            margin-bottom: 20rpx;
            border-radius: 14rpx;
            .cover-box {
                position: relative;
                width: 170px;
                height: 120px;
                .cover {
                    width: 100%;
                    height: 100%;
                }
                .discount-label {
                    position: absolute;
                    top: 20rpx;
                    left: -4rpx;
                    padding: 2rpx 8rpx;
                    border-radius: 0 12rpx 12rpx 0;
                    background-color: #fd6270;
                }
            }
            .info-box {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 168px;
                position: relative;
                padding: 0rpx 12rpx;
                .top {
                    width: 100%;
                }
            }
        }
    }

    &__title {
        width: 100%;
        height: 120rpx;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-all;
        // overflow: hidden;
    }
    &__outer-checkbox {
        margin-top: 10rpx;
        .icon {
            margin-left: 4rpx;
            font-size: 30rpx;
        }
        .holder {
            display: inline-block;
            padding: 0 10rpx;
            background-color: #F4051A;
        }
    }
}
</style>
